<template>
  <div class="container flex-box">
    <div class="main-container flex-item" style="width: calc(100% - 40px);margin-right:0">
      <div class="layout-table">
        <table class="el-table ui-table" :class="{'table-fixed-header': isFixed}"
          cellspacing="0"
          cellpadding="0"
          border="0">
          <thead class="ui-table__thead">
            <tr>
              <th class="ui-table_column_0">
                <div class="cell">类型</div>
              </th>
              <th class="ui-table_column_1">
                <div class="cell">姓名</div>
              </th>
              <th class="ui-table_column_2">
                <div class="cell">面试岗位</div>
              </th>
              <th class="ui-table_column_3">
                <div class="cell">面试部门</div>
              </th>
              <th class="ui-table_column_4">
                <div class="cell">工作地</div>
              </th>
              <th class="ui-table_column_5">
                <div class="cell">类型</div>
              </th>
              <th class="ui-table_column_6">
                <div class="cell">学历</div>
              </th>
              <th class="ui-table_column_7">
                <div class="cell">当前步骤</div>
              </th>
              <th class="ui-table_column_8">
                <div class="cell">处理人</div>
              </th>
              <th class="ui-table_column_9">
                <div class="cell">发起时间</div>
              </th>
              <th class="ui-table_column_10">
                <div class="cell">到达时间</div>
              </th>
              <th class="ui-table_column_11">
                <div class="cell">当前...</div>
              </th>
              <th class="ui-table_column_12">
                <div class="cell">总...</div>
              </th>
              <th class="ui-table_column_13">
                <div class="cell">操作</div>
              </th>
            </tr>
          </thead>
        </table>
        <div v-if="isFixed" style="height:50px;"></div>
        <table class="el-table ui-table mb-20"
          cellspacing="0"
          cellpadding="0"
          border="0">
          <tbody>
            <tr v-for="column in tableData">
              <td class="ui-table_column_0" width="7%">
                <div class="cell">
                  {{column.type}}
                </div>
              </td>
              <td class="ui-table_column_1" width="7%">
                <div class="cell">
                  <a class="button-text">{{column.name}}</a>
                </div>
              </td>
              <td class="ui-table_column_2">
                <div class="cell">
                  {{column.interviewPost}}
                </div>
              </td>
              <td class="ui-table_column_3" width="7%">
                <div class="cell">
                  {{column.interviewDepartment}}
                </div>
              </td>
              <td class="ui-table_column_4" width="8%">
                <div class="cell">
                  {{column.wordPlace}}
                </div>
              </td>
              <td class="ui-table_column_5" width="6%">
                <div class="cell">
                  {{column.workType}}
                </div>
              </td>
              <td class="ui-table_column_6" width="7%">
                <div class="cell">
                  {{column.education}}
                </div>
              </td>
              <td class="ui-table_column_7">
                <div class="cell">
                  {{column.currentStep}}
                </div>
              </td>
              <td class="ui-table_column_8" width="8%"> 
                <div class="cell">
                  {{column.manage}}
                </div>
              </td>
              <td class="ui-table_column_9" width="7%">
                <div class="cell">
                  {{column.startTime}}
                </div>
              </td>
              <td class="ui-table_column_10" width="7%">
                <div class="cell">
                  {{column.endTime}}
                </div>
              </td>
              <td class="ui-table_column_11" width="5%">
                <div class="cell">
                  {{column.now}}
                </div>
              </td>
              <td class="ui-table_column_12" width="5%">
                <div class="cell">
                  {{column.total}}
                </div>
              </td>
              <td class="ui-table_column_13" width="80" >
                <div class="cell">
                  <a class="button-text" @click="getDetail(column.id)">查看</a>
                </div>
              </td>
            </tr>
          </tbody>
        </table>
      </div>
      
    </div>

    <!-- <el-table class="ui-table" :data="tableData">
      <el-table-column label="类型" min-width="100px" prop="type" show-overflow-tooltip></el-table-column>
      <el-table-column label="姓名" min-width="100px" show-overflow-tooltip>
        <template slot-scope="scope">
          <a class="button-text">{{scope.row.name}}</a>
        </template>
      </el-table-column>
      <el-table-column label="面试岗位" min-width="100px" prop="interviewPost" show-overflow-tooltip></el-table-column>
      <el-table-column label="面试部门" min-width="150px" prop="interviewDepartment" show-overflow-tooltip></el-table-column>
      <el-table-column label="工作地" min-width="120px" prop="wordPlace" show-overflow-tooltip></el-table-column>
      <el-table-column label="类型" min-width="100px" prop="workType" show-overflow-tooltip></el-table-column>
      <el-table-column label="学历" min-width="100px" prop="education" show-overflow-tooltip></el-table-column>
      <el-table-column label="当前步骤" min-width="150px" prop="currentStep" show-overflow-tooltip></el-table-column>
      <el-table-column label="处理人" min-width="100px" prop="manage" show-overflow-tooltip></el-table-column>
      <el-table-column label="发起时间" min-width="110px" prop="startTime" show-overflow-tooltip></el-table-column>
      <el-table-column label="到达时间" prop="endTime" show-overflow-tooltip></el-table-column>
      <el-table-column label="当前..." prop="now" show-overflow-tooltip></el-table-column>
      <el-table-column label="总..." prop="total" show-overflow-tooltip></el-table-column>
      <el-table-column label="操作" min-width="100px">
        <template slot-scope="scope">
          <a class="button-text" @click="getDetail(scope.row.id)">查看</a>
        </template>
      </el-table-column>
    </el-table> -->
    <!-- 面试流程跟踪 -->
    <m-doalogInterviewProcess :visible.sync="interviewProcessVisible"></m-doalogInterviewProcess>
  </div>
</template>

<script>
import {Table, TableColumn} from 'element-ui'
import DoalogInterviewProcess from './components/dialogInterviewProcess'
  export default {
    components: {
      [Table.name]: Table,
      [TableColumn.name]: TableColumn,
      'm-doalogInterviewProcess': DoalogInterviewProcess
    },
    data () {
      return {
        tableData: [],
        interviewProcessVisible: false,
        isFixed: false
      }
    },
    created() {
      this.loadData()
      window.addEventListener('scroll', () => {
        if(this.$route.path.indexOf('/pending') == 0){
          this.initSticky()
        }
      })
    },
    mounted() {
      window.onresize = () => {
        this.initWidth()
      }
    },  
    methods: {
      initSticky() {
        const _height = this.$util.getScrollTop()
        const _zoom = this.$util.getZoom()
        const topHeight = document.getElementsByClassName('temp-header')[0].clientHeight + 20
        if(_height >= topHeight * _zoom) {
          this.isFixed = true
          this.initWidth()
        } else {
          this.isFixed = false
          this.initWidth()
        }
      },
      initWidth() {
        for(let i=0; i<14; i++) {
          if(document.getElementsByClassName('ui-table_column_' + i)[1]) {
            const _w = document.getElementsByClassName('ui-table_column_' + i)[1].clientWidth || 0
            document.getElementsByClassName('ui-table_column_' + i)[0].style.width = _w + 'px'
          }
        }
        if(document.getElementsByClassName('ui-table')[1]){
          document.getElementsByClassName('ui-table')[0].style.width = document.getElementsByClassName('ui-table')[1].clientWidth + 'px'
        }
      },
      loadData() {
        for(var i = 0; i < 20; i++){
          this.tableData.push({
            id: i+1,
            type: '伯乐', //类型
            name: '周宇', //姓名
            interviewPost: '21527-腾讯企鹅辅导学科运营', //面试岗位
            interviewDepartment: '音乐财经部', //面试部门
            wordPlace: '深圳', //工作地
            workType: '正式', //类型
            education: '本科', //学历
            currentStep: 'HR面试官HR面试官HR面试官HR面试官', //当前步骤
            manage: 'mywaymai', //处理人
            startTime: '2018-9-22', //发起时间
            endTime: '2018-10-22', //到达时间
            now: 0,
            total: 0
          })
        }
        this.$nextTick(_ => {
          this.initWidth()
        })
      },
      getDetail(id) {
        this.interviewProcessVisible = true;
      }
    }
  }
</script>

<style>

 
</style>
